/*
 * @Author      : ZhouQiJun
 * @Date        : 2025-07-19 11:19:38
 * @LastEditors : ZhouQiJun
 * @LastEditTime: 2025-07-20 16:34:03
 * @Description : 参数化方法
 */
import { Page } from '@playwright/test'
import HelperBase from './HelperBase'

type FormValue = {
  name: string
  email: string
  remember: boolean
}
class FormLayoutsPage extends HelperBase {
  constructor(page: Page) {
    super(page)
  }

  async submitGridForm(email: string, password: string, radioLabel: string) {
    const nbCard = this.page.locator('nb-card').filter({ hasText: 'Using the Grid' })
    const emailLo = nbCard.getByRole('textbox', { name: 'email' })
    const passwordLo = nbCard.getByRole('textbox', { name: 'password' })
    const radioLo = nbCard.getByRole('radio', { name: radioLabel })
    const btnLo = nbCard.getByRole('button')

    await emailLo.fill(email)
    await passwordLo.fill(password)
    // NOTE input radio 大小为 1x1，几乎不可见，只有强制操作
    await radioLo.check({ force: true })
    await btnLo.click()
  }

  /**
   * 行内表单
   * @param formValue {@link FormValue}
   * @param {string} formValue.name - 用户名
   * @param {string} formValue.email - 邮箱
   * @param {Boolean} [formValue.remember=false] - 是否居住信息
   */
  async submitInlineForm(formValue: FormValue) {
    const nbCard = this.page.locator('nb-card').filter({ hasText: 'inline form' })
    const emailLo = nbCard.getByRole('textbox', { name: 'email' })
    const nameInput = nbCard.getByRole('textbox', { name: 'jane doe' })
    const checkInput = nbCard.getByRole('checkbox')
    const btnLo = nbCard.getByRole('button')

    await emailLo.fill(formValue.email)
    await nameInput.fill(formValue.name)
    if (formValue.remember) await checkInput.check({ force: true })
    else await checkInput.uncheck({ force: true })
    await btnLo.click()
  }
}

export default FormLayoutsPage
